<template>
	<view class="container">
		<view class="detail-swiper">
			<trans-custom bgColor="243,73,48" :isBack="true" :opacity="opacity" :iconOpcity="iconOpcity">
				<block slot="content" class=" text-cut">{{navTitle}}</block>
			</trans-custom>
			<view class="swiper-content">
				<swiper autoplay="true" interval="4000" duration="500" indicator-dot='true' @change="swiperChange" circular="true"
				 v-if="shopsInfo.photos && shopsInfo.photos.length>0">
					<block v-for="(item,index) in shopsInfo.photos" :key="index">
						<swiper-item>
							<image class="slide-image" :src="item+'?x-oss-process=image/resize,h_420,w_750'" mode=""></image>
						</swiper-item>
					</block>
				</swiper>

				<view class="share-right">
					<text class="cuIcon-service text-green" @tap="makePhone"></text>
					<text class="lg cuIcon-share  text-green" @tap="showShare"></text>
				</view>
			</view>
			<view class="shop-info">
				<image :src="shopsInfo.shop_image+'?x-oss-process=image/resize,m_fill,h_160,w_160'" mode=""></image>
				<view class="name text-cut">
					{{shopsInfo.name?shopsInfo.name:''}}
				</view>
				<view class="tags">
					<uni-tag v-for="(item,index) in shopsInfo.tags" :key="index" inverted="true" :text="item" size="small" :type="colorList[index]"></uni-tag>
				</view>
				<view class="tips text-cut">
					{{shopsInfo.announcement?shopsInfo.announcement:''}}
				</view>
			</view>
		</view>

		<!-- 精选好物 -->
		<view class="concentration" v-if="isConcent && terraceGoods.length>0">
			<view class="concent-title">
				精选好物
			</view>
			<view class="banner-content" v-if="terraceGoods.length>0">
				<scroll-view scroll-x scroll-with-animation="true">
					<view class="swiper-container">
						<view class='swiper-item' v-for="(item,index) in terraceGoods" :key="index">
							<view class="coon" :style="item.style">
								<image :src="item.image+'?x-oss-process=image/resize,m_fill,h_200,w_200'" lazy-load />
								<view class="">
									{{item.product_name}}
								</view>
								<view class="">
									{{item.cost}}积分
								</view>
								<view class="" @click="goReceive(item.id)">
									立即兑换
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 分享 -->
		<view class="concentration" v-if="needShareGoods.length>0">
			<view class="concent-title">
				<view class="">
					邀好友赚奖励
				</view>
				<view class="" style="font-size: 24rpx;color: #999;" @click="goCentre">
					查看更多
				</view>
			</view>
			<view class="banner-content" v-if="needShareGoods.length>0">
				<scroll-view scroll-x scroll-with-animation="true">
					<view class="swiper-container">
						<view class='swiper-item' v-for="(item,index) in needShareGoods" :key="index">
							<view class="coon" :data-id="item.id" @click="showProduct">
								<image :src="item.image+'?x-oss-process=image/resize,m_fill,h_200,w_200'" lazy-load />
								<view class="text-cut">
									{{item.product_name}}{{item.product_name}}{{item.product_name}}
								</view>
								<view class="">
									<text class="text-price text-colorP" v-if="item.price>0">{{item.price}}</text>
									<text class="text-colorP" v-if="item.integral>0 && item.price>0">+</text>
									<text class="text-colorP" v-if="item.integral>0">{{item.integral}}</text>
									<text class="text-colorP" v-if="item.integral>0">积分</text>
								</view>
								<view class="" @tap.stop="showModal(item.id)">
									邀好友购买赚{{item.max_money}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="shop-content" id="shopContent">
			<view class="bottom-cont">
				<view @click='changeTab("0")'>
					<text :class="tabActive==0?'active':''">商品</text>
					<text v-if="tabActive==0"></text>
				</view>
				<view @click='changeTab("1")'>
					<text :class="tabActive==1?'active':''">商家</text>
					<text v-if="tabActive==1"></text>
				</view>
				<view @click='changeTab("2")'>
					<text :class="tabActive==2?'active':''">评价</text>
					<text v-if="tabActive==2"></text>
				</view>
			</view>
			<view class="" v-if="tabActive==2">
				<view class="evaluate" v-for="(item,index) in evaList" :key="index">
					<image class="user_img" :src="item.headimg" mode="aspectFill" lazy-load></image>
					<view class="eva-cont">
						<view class="name text-cut">
							{{item.user_name}}
						</view>
						<view class="time">
							{{item.create_time}}
						</view>
						<view class="content">
							{{item.content}}
						</view>
						<view class="imgs" v-if="item.images_list.length>0">
							<image :src="j" mode="" v-for="(j,i) in item.images_list" :key="i" lazy-load></image>
						</view>
					</view>
				</view>
				<view class="go-all" @click="goAllEva">
					查看所有评论
				</view>
				<view class="no-evalute" v-if="evaList.length == 0">
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/comment-is-empty.png" lazy-load mode=""></image>
					<text>暂时没有其他评价，去其他地方看看吧</text>
				</view>
			</view>
			<view class="product-list" v-if="tabActive==0">
				<scroll-view class="bookshelf-content" scroll-x="true">
					<block v-for="(item,index) in productList" :key="index">
						<view class="item" :class="item.category_id != toView?'default':'primary'" @click="changeProduct(item.category_id)">
							{{item.categoryName}}
						</view>
					</block>
				</scroll-view>
				<view class="list">
					<view class="p_item" v-for="(item,index) in showProList" :key="index" :data-id="item.id" @tap="showProduct">
						<image :src="item.image+'?x-oss-process=image/resize,m_fill,h_160,w_160'" lazy-load mode=""></image>
						<view class="p_info">
							<view>{{item.product_name}}</view>
							<view class="text-cut" v-if="item.sales>0">已售{{item.sales}}+</view>
							<view class="text-cut" v-if="item.sales==0">{{item.product_info}}</view>
							<view>
								<text class="text-price text-colorP" v-if="item.price>0">{{item.price}}</text>
								<text class="text-colorP" v-if="item.integral>0 && item.price>0">+</text>
								<text class="text-colorP" v-if="item.integral>0">{{item.integral}}</text>
								<text class="text-colorP" v-if="item.integral>0">积分</text>
							</view>
							<view class="ot_price">市场价<text class="text-price ">{{item.ot_price}}</text></view>
							<view class="cu-btn bg-colorP round shadow-blur position" :data-id="item.id" :data-img="item.image" @tap.stop="addGoods">
								加入购物车
							</view>
						</view>
					</view>
				</view>
				<no-content :showType="'data'" v-if="noProductShow"></no-content>
				<view class="cu-bar bg-white tabbar border shop product-ctrl" style="border-top: solid 1rpx #efefef;z-index: 5;">
					<!-- <view class="action" @tap="makePhone">
					</view> -->
					<view class="action" @click='resultProducts.length>0?showGoods():""'>
						<view class="cuIcon-cart">
							<view class="cu-tag badge" v-if="zoomSaleNum>0">{{zoomSaleNum}}</view>
						</view>
						购物车
					</view>
					<view class="bg-white submit" style="font-size: 26rpx">
						总额：
						<view class="text-price text-colorP" style="font-weight: bold;" v-if="resultPrice>0">{{resultPrice}}</view>
						<view class="text-colorP" style="font-weight: bold;" v-if="resultPrice>0 && resultScord>0">+</view>
						<view class="text-colorP" style="font-weight: bold;" v-if="resultScord>0">{{resultScord}}</view>
						<view class="text-colorP" style="font-weight: bold;" v-if="resultScord>0">积分</view>

						<view class="text-colorP" v-if="resultPrice==0 && resultScord==0">
							0.00
						</view>
					</view>
					<view class="bg-red submit" @click="noExploit">确认订单</view>
				</view>
			</view>
			<view class="shop-all-info" v-if="tabActive==1">
				<view class="title" v-if="shopsInfo.recommend_article.length>0">
					<view>
						商家实景
					</view>
					<!-- <view>
						共2张
					</view> -->
				</view>
				<view class="photos" v-if="shopsInfo.recommend_article.length>0">
					<scroll-view class="bookshelf-content-photo" scroll-x="true">
						<block v-for="(item,index) in shopsInfo.recommend_article" :key="index">
							<view class="photo-img">
								<image :src="item.src" mode="" lazy-load :data-index="index" @click="showImg"></image>
								<view class="">
									{{item.title}}
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
				<view class="message" :style="[{marginTop:shopsInfo.recommend_article.length>0?'20rpx':'0'}]">
					<view class="title">
						<view>
							商家信息
						</view>
						<view></view>
					</view>
					<view class="message-item">
						<image class="iconText" lazy-load src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-time.png"
						 mode=""></image>
						<view class="right">
							<view class="tit">
								营业时间
							</view>
							<view class="val">
								{{shopsInfo.start_time}}~{{shopsInfo.end_time}}
							</view>
						</view>
					</view>
					<view class="message-item">
						<image class="iconText" lazy-load src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-space.png"
						 mode=""></image>
						<view class="right">
							<view class="tit">
								经营范围
							</view>
							<view class="val">
								{{shopsInfo.industry_name}}
							</view>
						</view>
					</view>
					<view class="message-item">
						<image class="iconText" lazy-load src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-phone.png"
						 mode=""></image>
						<view class="right">
							<view class="tit">
								商家电话
							</view>
							<view class="val">
								{{shopsInfo.phone}}
							</view>
						</view>
					</view>
					<view class="message-item">
						<image class="iconText" lazy-load src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-address.png"
						 mode=""></image>
						<view class="right">
							<view class="tit">
								商家地址
							</view>
							<view class="val">
								{{shopsInfo.address}}
							</view>
							<view class="go-location" @click="openLocation">
								<text>去导航</text>
								<tui-icon :name="'arrowright'" :size="'20'" :color="'#39b54a'"></tui-icon>
							</view>
						</view>
					</view>
					<view class="message-item">
						<image class="iconText" lazy-load src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-desc.png"
						 mode=""></image>
						<view class="right" style="border-bottom: none">
							<view class="tit">
								商家介绍
							</view>
							<view class="val"></view>
						</view>
					</view>
					<view class="shop-info-desc">
						<rich-text :nodes="shopsInfo.desc"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<!-- 购物车上浮弹窗 -->
		<view class="layer-cont" v-if="bottomStatus" @click='hideGoods'></view>
		<view :class="bottomStatus?'layer-goods active':'layer-goods'">
			<view class="room">
				<view class="top-btn">
					<view>已选商品</view>
					<view @click='clearAll'>清空</view>
				</view>
				<view class="con">
					<view class="good" v-for="(item,index) in resultProducts" :key="index">
						<view class="text-cut">{{item.product_name}}</view>
						<view class="">
							<view class="text-price text-colorP" v-if="item.price>0">{{item.price}}</view>
							<view class="text-colorP" v-if="item.price>0 && item.integral>0">+</view>
							<view class="text-colorP" v-if="item.integral>0">{{item.integral}}</view>
							<view class="text-colorP" v-if="item.integral>0">积分</view>
						</view>
						<view class="sale-num" style="position:inherit">
							<view class="btn" @tap="downGoods(item.id,'',true)">
								<image lazy-load src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/app-down.png" mode=""></image>
							</view>
							<text>{{item.saleNum}}</text>
							<view class="btn" :data-id="item.id" @tap="addGoods">
								<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/app-add.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view :class="['product-detail',productStatus?'active':'']">
			<image class="hide-btn" v-if="productStatus" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/back.png"
			 @click='hideProduct'></image>
			<view class="swiper-image-content" style='height: 600rpx'>
				<swiper style='height: 600rpx' autoplay="true" interval="3000" duration="1000" circular="true">
					<block v-for="(item,index) in activeProduct.slider_image" :key="index">
						<swiper-item>
							<image :src="item+'?x-oss-process=image/resize,m_fill,h_600,w_750'" lazy-load mode='' class="slide-image" />
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view class="product_info">
				<view class="text-cut">{{activeProduct.product_name}}</view>
				<view>{{activeProduct.product_info}}</view>
				<view><text v-if="activeProduct.sales>0">已售{{activeProduct.sales}}+</text></view>
				<view class="">
					<view class="text-price text-colorP" v-if="activeProduct.price>0">{{activeProduct.price}}</view>
					<view class="text-colorP" v-if="activeProduct.price>0 && activeProduct.integral>0">+</view>
					<view class="text-colorP" v-if="activeProduct.integral>0">{{activeProduct.integral}}</view>
					<view class="text-colorP" v-if="activeProduct.integral>0">积分</view>
				</view>
				<!-- 	<image :src="activeProduct.isCollection?'http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/shixin_collect.png':'http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/kong_collect.png'"
				 class="collect-image" @click='yesOrno'></image> -->
				<view class="cu-btn bg-colorP round shadow-blur position" style="right:20rpx;bottom: 20rpx;" :data-id="activeProduct.id"
				 :data-img="activeProduct.image" @tap="addGoods">
					加入购物车
				</view>
			</view>
			<view class="product-detail-new">
				<view class="p_t">商品详情</view>
				<view class="product-content shop-info-desc" v-html="activeProduct.description"></view>
			</view>
		</view>
		<!-- 加入购物车动画 cartx 和 carty 是购物车位置在屏幕位置的比例 例如左上角x0.1 y0.1 右下角 x0.9 y0.9-->
		<shopCarAnimation ref="carAnmation" cartx="0.22" carty="1.04"></shopCarAnimation>
		<!-- 分享商家 -->
		<m-share :windowSize="windowSize" :animationLayer="animationLayer" :animationContent="animationContent" :shareShow="shareShow"
		 @hideShare="hideShare" :shareType="'shops'" :shopsInfo="shopsInfo"></m-share>
		<!-- H5引导分享 -->
		<view class="h5-share" v-if="hShare" @click="hidehShare">
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/sharingTipsImg.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import uniTag from "./component/uni-tag.vue";
	import noContent from "./component/noContent.vue";
	import mShare from "./component/m-share.vue";
	import shopCarAnimation from '@/components/fly-in-cart/fly-in-cart.vue'
	import htmlParser from '@/utils/html-parser.js'
	import tuiIcon from "@/components/thorUI/icon.vue";
	import tuiModal from "@/components/thorUI/modal.vue"
	import {
		promisify
	} from '@/utils/promise.util'
	export default {
		name: 'generalDetail',
		components: {
			uniTag,
			shopCarAnimation,
			noContent,
			mShare,
			tuiIcon,
			tuiModal
		},
		data() {
			return {
				navTitle: '商铺详情',
				business_id: '',
				shopsInfo: {},
				colorList: ['success', 'primary', 'warning', 'error'],
				tabActive: 0,
				toView: '',
				productList: [],
				showProList: [],
				opacity: 0,
				iconOpcity: 0.5,
				scrollH: 0,
				// 购物车
				resultPrice: '0.00',
				resultScord: 0,
				resultProducts: [],
				zoomSaleNum: 0,
				// 购物车弹窗 && 商品详情弹窗
				bottomStatus: false,
				productStatus: false,
				activeProduct: {},
				noProductShow: false,
				// 分享
				CustomBar: this.CustomBar,
				layerHeight: 0,
				shareShow: false,
				animationLayer: {},
				animationContent: {},
				windowSize: {},
				// 评价列表
				evaList: [],
				// 新人福利
				showNewWelfare: false,
				animationResult: {},

				isConcent: false,
				terraceGoods: [],
				orderId: '',

				// 分销
				goodsInfo: {
					price: '',
					integral: '',
					product_name: '',
				},
				// 海报数据
				c_qr: '',
				c_bg: '',
				c_shop: '',
				canvasShow: false,
				shareImg: '',
				isShare: false,
				needShareGoods: [],

				// 新加字段
				c_fx: '',
				c_kj: '',
				c_xin: '',
				c_shopImage: '',
				modalShow: false,
				thisProId: '',
				button: [{
					text: "分享好友",
					type: 'green',
					plain: true,
					openType: true
				}, {
					text: "生成海报",
					plain: true
				}],
				shareScene: '',
				thisFromGoods: '',

				hShare: false
			}
		},
		onLoad(options) {
			// options.status = 'needLogin'
			// options.orderId = '162'
			// options.scene = '492'


			// 如果携带有必须登录的参数，先检查是否登录
			// if (options.status && options.status == 'needLogin') {
			// 	if (!uni.getStorageSync('auth_token')) {
			// 		let curUrl = `/${this.curUrlWithArgs()}`
			// 		curUrl = encodeURIComponent(curUrl)
			// 		uni.redirectTo({
			// 			url: `/pages/login?next=${curUrl}`,
			// 		})
			// 		return
			// 	}
			// }

			// #ifdef H5
			var href = window.location.href
			if (href.indexOf('code') > -1) {
				var zIndex = window.location.href.slice(window.location.href.indexOf('?'), window.location.href.indexOf('#'))
				window.location.href = window.location.href.split(zIndex).join('')
			}
			// #endif

			// 是否从积分兑换过来的
			if (options.thisGoods) {
				this.thisFromGoods = options.thisGoods
			}

			// 支付从支付完成页面过来的
			if (options.orderId) {
				this.isConcent = true
				this.orderId = options.orderId
				this.getHelpProduct()
			}

			if (options.scene) {
				this.business_id = options.scene
			} else {
				this.business_id = options.busId
			}
			this.getDetailNew()
			this.getGoods()
			this.toEva()
			this.getNeedShare()
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
					this.windowSize = res
				}
			})
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / (this.scrollH / 4);
			if (this.opacity >= 1 && opcity >= 1) {
				return;
			}
			this.opacity = Number(opcity).toFixed(2);
			var thisOpcity = this.opacity < 0 ? 0 : 1
			this.iconOpcity = 0.5 * (thisOpcity - this.opacity)
		},
		methods: {
			hidehShare() {
				this.hShare = false
			},
			/**配置jsApi**/
			wxConfig() {
				var that = this
				let system = uni.getSystemInfoSync(); // 获取系统信息
				var url = ''
				if (system.platform === 'android') { // 判断平台
					url = window.location.href
				} else {
					if(window.location.href.indexOf('#')){
						url = window.location.href.split('#')[0]
					}else{
						url = window.location.href.split('//')[0]
					}
				}

				this.$request({
					url: '/JsTicket/getSignPackage',
					data: {
						'url': url,
					},
					success: res => {
						var result = res.data.data
						that.$wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端console.log出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: result.appId, // 必填，公众号的唯一标识
							timestamp: result.timestamp, // 必填，生成签名的时间戳
							nonceStr: result.nonceStr, // 必填，生成签名的随机串
							signature: result.signature, // 必填，签名
							jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo",
								"onMenuShareQZone"
							] // 必填，需要使用的JS接口列表
						});
						var title = that.shopsInfo.name
						var desc = that.shopsInfo.summary
						var thisUrl = window.location.href.split('#')[0] + 'static/html/redirect.html?app3Redirect=' +
							encodeURIComponent(window.location.href);;
						var imgurl = that.shopsInfo.shop_image

						that.$wx.ready(function() {
							//获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
							that.$wx.onMenuShareQQ({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});

							//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
							that.$wx.onMenuShareAppMessage({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								type: 'link', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});

							//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
							that.$wx.onMenuShareTimeline({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});

							//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
							that.$wx.onMenuShareWeibo({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});

							//获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
							that.$wx.onMenuShareQZone({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});
						})
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			goCentre() {
				uni.navigateTo({
					url: '/pages/distributionCentre?busId='+ this.business_id
				})
			},
			showModal(id) {
				// #ifdef H5
				if (!uni.getStorageSync('auth_token')) {
					let curUrl = `/${this.curUrlWithArgs()}?busId=${this.business_id}`
					if (this.orderId) {
						curUrl += `&orderId=${this.orderId}`
					}
					curUrl = encodeURIComponent(curUrl)
					uni.redirectTo({
						url: `/pages/login?next=${curUrl}`,
					})
					return
				}
				// #endif
				uni.navigateTo({
					url: `/pages/shopsGoodShare?scene=${id}`
				})
			},
			hide() {
				this.modalShow = false
			},
			moveHandle() {},
			hideShareG() {
				this.isShare = false
			},
			// 领取商品
			goReceive(id) {
				// #ifdef H5
				if (!uni.getStorageSync('auth_token')) {
					let curUrl = `/${this.curUrlWithArgs()}?busId=${this.business_id}`
					if (this.orderId) {
						curUrl += `&orderId=${this.orderId}`
					}
					curUrl = encodeURIComponent(curUrl)
					uni.redirectTo({
						url: `/pages/login?next=${curUrl}`,
					})
					return
				}
				// #endif
				uni.navigateTo({
					url: `/pages/forGoods?orderId=${this.orderId}&productId=${id}`
				})
			},
			// 打开地图
			openLocation() {
				var shopInfo = this.shopsInfo
				uni.openLocation({
					latitude: shopInfo.latitude,
					longitude: shopInfo.longitude,
					name: shopInfo.name,
					address: shopInfo.address,
					scale: 18
				})
			},
			curUrlWithArgs() {
				var pages = getCurrentPages()
				var currentPage = pages[pages.length - 1]
				var url = currentPage.route
				var options = currentPage.options
				var urlWithArgs = url + '?'
				for (var key in options) {
					var value = options[key]
					urlWithArgs += key + '=' + value + '&'
				}
				urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
				return urlWithArgs
			},
			showImg(e) {
				var photos = []
				this.shopsInfo.recommend_article.forEach(item => {
					photos.push(item.src)
				})
				uni.previewImage({
					current: photos[e.currentTarget.dataset.index],
					urls: photos
				})
			},
			goAllEva() {
				uni.navigateTo({
					url: '/pages/cloudMall/evaluteList?status=1&id=' + this.business_id
				})
			},
			getHelpProduct() {
				var that = this;
				this.$request({
					url: '/HelpProduct/get_product',
					data: {
						order_id: that.orderId
					},
					success: res => {
						if (res.data.status == 1) {
							that.terraceGoods = res.data.data
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getNeedShare() {
				var that = this;
				this.$request({
					url: '/product/get_distribution_product',
					data: {
						business_id: that.business_id
					},
					success: res => {
						if (res.data.status == 1) {
							that.needShareGoods = res.data.data
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			toEva() {
				var that = this;
				this.$request({
					url: '/OrderAppraises/get_list',
					data: {
						shopId: that.business_id,
						page: 1
					},
					success: res => {
						if (res.data.status == 1) {
							that.evaList = res.data.data.data
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 显示分享DOM
			showShare() {
				var that = this
				// #ifdef H5
				that.hShare = true
				return
				// #endif
				that.shareShow = true
				var animationL = uni.createAnimation({
					duration: 200,
					timingFunction: 'ease',
				})
				animationL.opacity(1).step()
				that.animationLayer = animationL.export()
				setTimeout(function() {
					var animationC = uni.createAnimation({
						duration: 500,
						timingFunction: 'ease',
					})
					animationC.bottom(0).step()
					that.animationContent = animationC.export()
				}.bind(that), 200)
			},
			// 隐藏分享DOM
			hideShare() {
				var that = this
				var animationC = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				animationC.bottom('-270rpx').step()
				that.animationContent = animationC.export()
				setTimeout(function() {
					var animationL = uni.createAnimation({
						duration: 200,
						timingFunction: 'ease',
					})
					animationL.opacity(0).step()
					that.animationLayer = animationL.export()
					that.shareShow = false
				}.bind(that), 500)
			},
			// 敬请期待
			noExploit() {
				// #ifdef H5
				if (!uni.getStorageSync('auth_token')) {
					let curUrl = `/${this.curUrlWithArgs()}?busId=${this.business_id}`
					if (this.orderId) {
						curUrl += `&orderId=${this.orderId}`
					}
					curUrl = encodeURIComponent(curUrl)
					console.log(curUrl)
					uni.redirectTo({
						url: `/pages/login?next=${curUrl}`,
					})
					return
				}
				// #endif
				var that = this
				var resultProducts = that.resultProducts
				if (resultProducts.length == 0) {
					uni.showToast({
						title: '请添加商品到购物车~',
						icon: 'none'
					})
					return
				}
				var needData = {}
				needData['shopInfo'] = {
					shopName: that.shopsInfo.name,
					shopId: that.shopsInfo.id,
					shopImg: that.shopsInfo.shop_image
				}
				needData['productList'] = []
				resultProducts.forEach(item => {
					needData['productList'].push({
						goodsName: item.product_name,
						goodsImg: item.image,
						id: item.id,
						integral: item.integral,
						shopPrice: item.price,
						saleNums: item.saleNum
					})
				})
				uni.setStorageSync('needData', needData)
				uni.navigateTo({
					url: "/pages/confirmOrder?from=offline"
				})
			},
			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			},
			// 取消收藏或发起收藏
			yesOrno() {
				var that = this;
				if (!that.activeProduct.isCollection) {
					// 添加收藏
					var params = {
						product_id: that.activeProduct.id,
						type: 'collection'
					}
					this.$request({
						url: '/ProductRelation/addCollection',
						data: params,
						success: res => {
							uni.hideLoading()
							if (res.data.status == 1) {
								uni.showModal({
									content: '已收藏',
									showCancel: false
								})
								that.activeProduct.isCollection = true
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					// 取消收藏
					var params = {
						product_id: that.activeProduct.id,
						type: 'collection'
					}
					this.$request({
						url: '/ProductRelation/cancelCollection',
						data: params,
						success: res => {
							uni.hideLoading()
							if (res.data.status == 1) {
								uni.showModal({
									content: '已移除收藏',
									showCancel: false
								})
								that.activeProduct.isCollection = false
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			// 拨打电话
			makePhone() {
				uni.makePhoneCall({
					phoneNumber: this.shopsInfo.phone
				});
			},
			// 处理浮点数
			mul(num1, num2) {
				var m = 0,
					r1, r2;
				var s1 = num1.toString();
				var s2 = num2.toString();
				try {
					m += s1.split('.')[1].length
				} catch (e) {

				}
				try {} catch (e) {
					m += s2.split('.')[1].length
				}
				r1 = Number(num1.toString().replace(".", ""));
				r2 = Number(num2.toString().replace(".", ""));
				return r1 * r2 / Math.pow(10, m);
			},
			add(num1, num2) {
				var r1, r2, m;
				try {
					r1 = num1.toString().split('.')[1].length;
				} catch (e) {
					r1 = 0
				}
				try {
					r2 = num2.toString().split('.')[1].length;
				} catch (e) {
					r2 = 0
				}
				m = Math.pow(10, Math.max(r1, r2));
				return Math.round(num1 * m + num2 * m) / m;
			},
			// 增加数量
			addGoods(e) {
				var that = this;
				var goodsId = e.currentTarget.dataset.id
				var top = e.currentTarget.dataset.top
				var img = e.currentTarget.dataset.img
				var bottom = e.currentTarget.dataset.bottom
				var productList = that.productList;
				productList.forEach(i => {
					if (i.productList) {
						i.productList.forEach(j => {
							if (j.id == goodsId) {
								j['saleNum'] += 1
								j['totalAmount'] = Number(j.saleNum) * Number(j.price)
								j['totalScord'] = Number(j.saleNum) * j.integral
							}
						})
					}
				})
				that.productList = productList
				// 在商品详情增加商品数量
				if (!bottom && img) {
					// 成功的话，调用加入购物车动画
					this.$refs.carAnmation.touchOnGoods(e);
				}
				// 统计当前选中商品及总额
				that.totalityPro()
			},
			// 减少数量
			downGoods(id, top, bottom) {
				var that = this;
				var goodId = id;
				var productList = that.productList;
				productList.forEach(i => {
					if (i.productList) {
						i.productList.forEach(j => {
							if (j.id == goodId) {
								if (j.saleNum == 0) return;
								j['saleNum'] -= 1;
								j['totalAmount'] = Number(j.saleNum) * Number(j.price)
								j['totalScord'] = Number(j.saleNum) * j.integral
							}
						})
					}
				})

				that.productList = productList
				that.totalityPro()

				// 下方
				if (bottom) {
					if (that.resultProducts.length <= 0) {
						that.hideGoods()
					}
				}
			},
			// 打开购物车
			showGoods() {
				this.bottomStatus = true
			},
			hideGoods() {
				this.bottomStatus = false
			},
			// 清空购物车
			clearAll() {
				var that = this;
				var productList = that.productList;
				var resultPrice = that.resultPrice;
				var resultProducts = that.resultProducts;
				productList.forEach(i => {
					i.productList.forEach(j => {
						j.saleNum = 0;
					})
				})
				that.productList = productList
				that.totalityPro()
				that.hideGoods()
			},
			// 计算总数量及价钱
			totalityPro() {
				var that = this;
				var productList = that.productList;
				var resultPrice = 0;
				var resultScord = 0;
				var resultProducts = that.resultProducts;
				resultProducts = []
				resultPrice = 0;
				var zoomSaleNum = 0
				productList.forEach(i => {
					if (i.productList) {
						i.productList.forEach(j => {
							if (j.saleNum > 0) {
								resultProducts.push(j)
								zoomSaleNum += Number(j.saleNum)
							}
						})
					}
				})
				resultProducts.forEach(item => {
					resultPrice = that.add(resultPrice, item.totalAmount)
					resultScord = that.add(resultScord, item.totalScord)
				})
				that.resultProducts = resultProducts;
				that.resultPrice = resultPrice;
				that.resultScord = resultScord;
				that.zoomSaleNum = zoomSaleNum
			},
			// 切换商品类型
			changeProduct(categoryId) {
				this.showProList = this.productList.filter(item => item.category_id == categoryId)[0].productList
				this.toView = categoryId
			},
			scroll(e) {
				this.old.scrollLeft = e.detail.scrollLeft
			},
			changeTab(index) {
				this.tabActive = index
			},
			getGoods() {
				var that = this;
				this.$request({
					url: '/Product/getShopProduct',
					data: {
						business_id: that.business_id
					},
					success: res => {
						if (res.data.status == 1) {
							var product = res.data.data
							if (product.length == 0) {
								that.tabActive = 1
								that.productList = []
								that.noProductShow = true
								return false
							} else {
								product.forEach(item => {
									item.productList.forEach(jtem => {
										jtem['saleNum'] = 0;
										if (that.thisFromGoods != '' && jtem['id'] == that.thisFromGoods) {
											jtem['saleNum'] += 1
											jtem['totalAmount'] = Number(jtem.saleNum) * Number(jtem.price)
											jtem['totalScord'] = Number(jtem.saleNum) * jtem.integral

										}
									})
								})
								that.productList = product
								that.toView = product[0].category_id
								that.showProList = product[0].productList

								// if (that.data.proId) {
								// 	that.needShowProduct()
								// }
								// that.getHeight()

								// 是否存在分销商商品
								// that.getDistribution()
								// 是否存在积分换购来的商品，存在直接加入购物车
								if (that.thisFromGoods != '') {
									that.totalityPro()
									uni.showModal({
										content: '已为您放入购物车,再看看其他的吧~',
										showCancel: false,
										confirmText: '再看看'
									})
								}
							}
						}
						uni.hideLoading()

					},
					fail: () => {},
					complete: () => {}
				});
			},
			getDetailNew() {
				var that = this;
				this.$request({
					url: '/Shop/shopDetail',
					data: {
						business_id: that.business_id
					},
					success: res => {
						if (res.data.status == 1) {
							var shopDetail = res.data.data
							if (!shopDetail.photos) {
								shopDetail.photos = []
								shopDetail.photos.push(shopDetail.shop_image)
							}
							if (!shopDetail.tags) {
								shopDetail.tags = []
								shopDetail.tags.push('助力免单')
							} else {
								shopDetail.tags = shopDetail.tags.length > 3 ? shopDetail.tags.splice(0, 3) : shopDetail.tags
							}
							if (!shopDetail.tips) {
								shopDetail.tips = '公告：重要通知！！！在本店消费即可享受超值福利！'
							}

							// 修复富文本数据
							if (shopDetail.desc) {
								var jsonText = shopDetail.desc
								var htmlString = jsonText.replace(/\\/g, "").replace(/<img/g,
									"<img style=\"margin: 0 auto;display: block;width:100%;height:auto;\"");
								shopDetail.desc = htmlParser(htmlString);
							}
							that.shopsInfo = shopDetail
							that.navTitle = shopDetail.name

							// #ifdef H5
							that.wxConfig()
							// #endif
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			swiperChange() {},
			showProduct(e) {
				var that = this;
				var activeProduct = {}
				var proId = e.currentTarget.dataset.id;
				that.productList.map(item => {
					item.productList.map(jtem => {
						if (jtem.id == proId) {
							if (typeof(jtem.slider_image) == 'string') {
								if (jtem.slider_image != '') {
									jtem.slider_image = JSON.parse(jtem.slider_image)
								} else {
									if (jtem.image != '') {
										jtem.slider_image = []
										jtem.slider_image.push(jtem.image)
									} else {
										jtem.slider_image = []
									}
								}
							}
							// 修复富文本数据
							if (!jtem.beRest && jtem.description) {
								var jsonText = jtem.description
								var htmlString = jsonText.replace(/\\/g, "").replace(/<img/g,
									"<img style=\"margin: 0 auto;display: block;max-width:100%;height:auto;\"");
								// #ifdef !H5
								jtem.description = htmlParser(htmlString);
								// #endif

								// #ifdef H5
								jtem.description = htmlString
								// #endif

								jtem['beRest'] = true
							}

							activeProduct = jtem
						}
					})
				})

				that.activeProduct = activeProduct
				that.productStatus = true
			},
			// 关闭商品详情
			hideProduct() {
				this.productStatus = false
			},
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		onShow() {
			if (!uni.getStorageSync('needData')) {
				this.clearAll()
			}
		},
		onShareAppMessage(res) {
			var titleText = ''
			var path = ''
			var imageUrl = ''
			var that = this
			if (res.from === 'button') { // 来自页面内分享按钮
				if (res.target.dataset.name == "proShare") {
					var thisProId = this.thisProId
					var shareScene = that.shareScene
					titleText = '我发现一个好东西,快来看看~'
					path = '/pages/shopsGoodShare?scene=' + shareScene
					that.productList.map(item => {
						item.productList.map(jtem => {
							if (jtem.id == thisProId) {
								imageUrl = jtem.image
							}
						})
					})
				} else {
					titleText = '我发现了一家好店,快来看看~'
					path = '/pages/generalDetail?busId=' + this.business_id
					imageUrl = this.shopsInfo.shop_image
				}
			}
			return {
				title: titleText,
				path: path,
				imageUrl: imageUrl,
				success: (res) => {
					console.log("转发成功", res);
				},
				fail: (res) => {
					console.log("转发失败", res);
				}
			}
		}
	}
</script>

<style scoped>
	.no-evalute {
		height: 160rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.no-evalute image {
		width: 145rpx;
		height: 54rpx;
		margin-bottom: 20rpx;
	}

	.no-evalute text {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}

	.go-all {
		display: flex;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.go-all text {
		color: #999;
		font-size: 26rpx;
	}

	.go-all text:nth-child(1) {
		margin-right: 20rpx;
	}

	.cu-tag.badge {
		top: 0 !important;
		right: 0 !important
	}

	.shop-info-desc {
		font-size: 28rpx;
		line-height: 42rpx;
		letter-spacing: 1rpx;
		color: #333333;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.detail-swiper {
		width: 100%;
		height: 700rpx;
	}

	.swiper-content {
		width: 100%;
		height: 420rpx;
		position: relative;
	}

	.swiper-content .share-right {
		width: 100rpx;
		height: 48rpx;
		position: absolute;
		right: 20rpx;
		bottom: -48rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9;
	}

	.swiper-content .share-right text {
		/* color: #999; */
		font-size: 40rpx;
	}

	.slide-image,
	swiper {
		width: 100%;
		height: 100%;
	}

	.shop-info {
		width: 100%;
		height: 280rpx;
		background-color: #ffffff;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		display: flex;
		padding-bottom: 10rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 2;
		background: #fff;
		position: absolute;
		top: 400rpx;
		left: 0;
	}

	.shop-info image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-top: -80rpx;
		margin-bottom: 20rpx;
		box-shadow: -10rpx -5px 4px rgba(153, 153, 153, 0.2)
	}

	.shop-info .name {
		font-weight: bold;
		font-size: 36rpx;
		letter-spacing: 2rpx;
		color: #333333;
		margin-bottom: 20rpx;
		max-width: 600rpx;
	}

	.shop-info .tags {
		margin-bottom: 20rpx;
	}

	.shop-info .tags uni-tag:nth-child(2) {
		margin: 0 20rpx;
	}

	.shop-info .tips {
		font-size: 22rpx;
		letter-spacing: 1rpx;
		color: #666666;
		max-width: 600rpx;
		/* margin-bottom: 10rpx; */
	}

	.shop-content {
		background: #fff;
		width: 100%;
		overflow: hidden;
		border-radius: 8rpx 8rpx 0 0;
	}

	/* 选项 */
	.bottom-cont {
		border-radius: 8rpx 8rpx 0 0;
		height: 95rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		border-bottom: solid 1rpx #efefef;
		box-sizing: border-box;
	}

	.bottom-cont>view {
		flex: 1;
		height: 95rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.bottom-cont>view .active {
		color: #333333;
		font-weight: bold;
	}

	.bottom-cont>view text:nth-child(1) {
		font-size: 28rpx;
		color: #5d5d5d;
	}

	.bottom-cont>view text:nth-child(2) {
		width: 56rpx;
		height: 6rpx;
		display: block;
		background: linear-gradient(to right, #19e8db, #3080e8);
		/* 标准的语法 */
		position: absolute;
		bottom: 1rpx;
		left: 50%;
		transform: translateX(-28rpx);
		border-radius: 10%;
	}

	.product-list {
		width: 100%;
		background: #fff;
		padding: 0 20rpx 120rpx;
		box-sizing: border-box;
	}

	.bookshelf-content {
		white-space: nowrap; // 滚动必须加的属性
		width: 100%;
		padding: 20rpx 0;
	}


	.bookshelf-content .item:nth-child(1) {
		margin-left: 20rpx;
	}

	.bookshelf-content .item {
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		color: #333333;
		border: solid 1rpx #efefef;
		border-radius: 50rpx;
		background-color: #ffffff;
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		margin-right: 20rpx;
	}

	.bookshelf-content .item.primary {
		background-image: linear-gradient(90deg,
			#2caafe 0%,
			#0099ff 100%);
		border: solid 1rpx transparent;
		color: #fff;
	}

	.list {
		width: 100%;
		padding: 0 20rpx;
	}

	.list .p_item {
		border: solid 1rpx #efefef;
		border-radius: 8rpx;
		width: 100%;
		display: flex;
		padding: 25rpx;
		box-sizing: border-box;
		margin-bottom: 35rpx;
	}

	.list .p_item image {
		width: 160rpx;
		height: 160rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		margin-right: 20rpx;
		display: block;
	}

	.list .p_item .ot_price {
		color: #999;
		font-size: 24rpx;
	}

	.list .p_item .ot_price text {
		color: #999;
		font-size: 24rpx;
		text-decoration: line-through;
	}

	.list .p_item .p_info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
	}

	.position {
		width: 160rpx;
		height: 47rpx;
		position: absolute;
		bottom: -5rpx;
		right: 0;
		font-size: 20rpx;
	}

	.list .p_item .p_info>view:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		font-weight: bold;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.list .p_item .p_info>view:nth-child(2) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #666666;
		max-width: 440rpx;
	}

	.list .p_item .p_info>view:nth-child(3) {
		/* color: #f24d14; */
		font-weight: bold;
	}

	.sale-num {
		width: 160rpx;
		height: 47rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: #ffffff;
		border-radius: 18rpx;
		border: solid 1rpx #efefef;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 50rpx;
		border-right: none;
		border-left: none;
	}

	.sale-num .btn {
		width: 45rpx;
		height: 43rpx;
		border: solid 1rpx #efefef;
		border-radius: 100%;
		padding: 5rpx;
		box-sizing: border-box;
	}

	.sale-num .btn image {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 100%;
		background-color: #ffffff;
	}

	.sale-num text {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}

	.product-ctrl {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		border-bottom: solid 1rpx #efefef;
	}

	.shop-all-info {
		/* padding: 0 20rpx; */
		width: 100%;
		box-sizing: border-box;
		background: #f5f5f5;
	}

	.shop-all-info .title {
		padding: 0 20rpx;
		width: 100%;
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
	}

	.shop-all-info .title>view:nth-child(1) {
		font-size: 28rpx;
		color: #333333;
		letter-spacing: 1rpx;
		font-weight: bold;
	}

	.shop-all-info .title>view:nth-child(2) {
		color: #999999;
		font-size: 24rpx;
	}

	.bookshelf-content-photo {
		white-space: nowrap; // 滚动必须加的属性
		width: 100%;

	}

	.photos {
		width: 100%;
		background: #fff;
		padding-bottom: 20rpx;
		background: #fff;
	}

	.photos .photo-img:nth-child(1) {
		margin-left: 20rpx;
	}

	.photos .photo-img {
		width: 240rpx;
		height: 280rpx;
		display: flex;
		flex-direction: column;
		display: inline-block;
		vertical-align: top;
		margin-right: 24rpx;
	}

	.photos .photo-img image {
		width: 240rpx;
		height: 240rpx;
		background-color: #cdcdcd;
		border-radius: 4rpx;
	}

	.photos .photo-img view {
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 1rpx;
		font-size: 26rpx;
		color: #333;
	}

	.message {
		width: 100%;
		background: #fff;
		margin-top: 24rpx;
		background: #fff;
		padding-bottom: 30rpx;
		background: #fff;
	}

	.message .message-item:last-child .right {
		border: none
	}

	.message .message-item:last-child .right .p {
		margin: 10rpx 0 !important;
	}

	.message-item {
		width: 100%;
		display: flex;
		min-height: 80rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.message-item .iconText {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.message-item .right {
		flex: 1;
		border-bottom: solid 1rpx #efefef;
		display: flex;
		justify-content: space-between;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
		box-sizing: border-box;
	}

	.message-item .right>view:nth-child(1) {
		width: 140rpx;
		font-size: 24rpx;
		color: #666666;
		letter-spacing: 1rpx;
		display: flex;
		align-items: center;
	}

	.message-item .right>view:nth-child(2) {
		font-size: 24rpx;
		flex: 1;
		color: #333;
		letter-spacing: 1rpx;
		display: flex;
		align-items: center;
	}


	.layer-cont {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 2;
	}

	.layer-goods {
		width: 100%;
		position: fixed;
		bottom: -500rpx;
		height: 500rpx;
		left: 0;
		background: #fff;
		z-index: 3;
		transition: all 0.5s;
	}

	.layer-goods.active {
		bottom: 100rpx !important;
	}

	.layer-goods .room {
		width: 100%;
		position: relative;
		padding: 70rpx 20rpx 0;
		box-sizing: border-box;
	}

	.top-btn {
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #eff0f2;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: 0;
	}

	.top-btn>view {
		color: #777b7e;
	}

	.room .good {
		width: 100%;
		height: 80rpx;
		border-bottom: solid 1rpx #f1f1f3;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.room .con {
		height: 400rpx;
		max-height: 400rpx;
		overflow-y: auto;
	}

	.room .good>view:nth-child(1) {
		color: #2d2d2f;
		font-size: 28rpx;
		width: 300rpx;
	}

	.room .good>view:nth-child(2) {
		flex: 1;
		display: flex;
		align-items: center;
	}


	.product-detail {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 200%;
		left: 0;
		/* padding-bottom: 100rpx; */
		box-sizing: border-box;
		transition: all 0.3s;
		z-index: 1025;
		min-height: var(--status-bar-height);
	}

	.product-detail.active {
		top: 0 !important;
		overflow-y: auto;
		background: #e5e5e5;
	}

	.hide-btn {
		width: 45rpx;
		height: 45rpx;
		position: fixed;
		top: 65rpx;
		left: 20rpx;
		z-index: 99;
	}

	.product_info {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;
		position: relative;
		border-radius: 0 0 8rpx 8rpx;
	}

	.product_info>view:nth-child(1) {
		color: #333333;
		font-size: 32rpx;
		width: 100%;
		font-weight: bold;
	}

	.product_info>view:nth-child(2) {
		font-size: 26rpx;
		letter-spacing: 1rpx;
		color: #666666;
		margin-top: 20rpx;
		
	}

	.product_info>view:nth-child(3) {
		font-size: 26rpx;
		margin-top: 20rpx;
	}

	.product_info>view:nth-child(4) {
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.product-detail-new {
		margin-top: 20rpx;
		background: #fff;
		padding: 0 0 100rpx;
		min-height: 500rpx;
		border-radius: 8rpx 8rpx 0 0;
	}

	.product-detail-new .p_t {
		/* height: 30rpx; */
		/* line-height: 30rpx; */
		text-align: left;
		color: #333;
		font-size: 30rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-weight: bold;
	}

	.product-detail-new .product-content {
		padding: 0 20rpx;
	}

	.collect-image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 30rpx;
		right: 25rpx;
	}

	.share-heade {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		font-size: 32rpx;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}



	.navBack {
		color: #fff;
		border-radius: 100%;
		width: 45rpx;
		height: 45rpx;
		text-align: center;
		line-height: 45rpx
	}

	.evaluate {
		width: 100%;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		border-bottom: solid 1rpx #efefef;
	}

	.evaluate .user_img {
		width: 64rpx;
		height: 64rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.evaluate .eva-cont {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.evaluate .eva-cont .name {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 400rpx;
	}

	.evaluate .eva-cont .time {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #666666;
		line-height: 70rpx
	}

	.evaluate .eva-cont .content {
		font-size: 28rpx;
		line-height: 42rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-bottom: 19rpx;
	}

	.evaluate .eva-cont .imgs {
		display: flex;
		flex-wrap: wrap;
	}

	.evaluate .eva-cont .imgs>image {
		width: 198rpx;
		height: 198rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.evaluate .eva-cont .imgs>image:nth-child(3n) {
		margin-right: 0 !important;
	}

	.go-location {
		display: flex;
		align-items: center;
	}

	.go-location text {
		color: #39b54a;
		font-size: 28rpx;
	}

	.concentration {
		width: 100%;
		margin: 0 0 20rpx;
		padding: 10rpx 0 0;
		background: #fff;
	}

	.concent-title {
		line-height: 68rpx;
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.banner-content {
		background: #fff;
		/* padding: 20rpx 0; */
		box-sizing: border-box;
		position: relative;
	}

	.swiper-container {
		width: 100%;
		/* display: flex; */
		padding-right: 24rpx;
		white-space: nowrap;
	}

	.swiper-container .swiper-item {
		display: inline-block;
		width: 250rpx;
		height: 330rpx;
		position: relative;
		margin: 0 10rpx 0 0;
		border-radius: 8rpx;
	}

	.swiper-container .swiper-item:nth-child(1) {
		margin-left: 24rpx;
	}

	.swiper-container .swiper-item .coon {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ffffff;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		box-sizing: border-box;
	}

	.swiper-container .swiper-item .coon image {
		width: 100%;
		height: 180rpx;
		border-radius: 8rpx;
		border: solid 1rpx #efefef;
		box-sizing: border-box;
	}

	.swiper-container .swiper-item .coon>view:nth-child(2) {
		font-size: 30rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 250rpx;
		margin: 10rpx 0 10rpx;
		text-align: center;
	}

	.swiper-container .swiper-item .coon>view:nth-child(3) {
		line-height: 30rpx;
		font-size: 26rpx;
		color: #f34930;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-align: center;
	}

	.swiper-container .swiper-item .coon>view:nth-child(4) {
		height: 40rpx;
		background-color: #f34930;
		box-shadow: 1rpx 2rpx 4rpx 0rpx rgba(153, 36, 19, 0.35);
		border-radius: 20rpx;
		line-height: 40rpx;
		color: #fff;
		font-size: 24rpx;
		margin-bottom: 10rpx;
		text-align: center;
	}

	.goods-share-cont {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		z-index: 1027;
	}

	.h5-share {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		z-index: 1027;
	}

	.h5-share image {
		width: 750rpx;
		height: 400rpx;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1028;
	}

	.share-img {
		display: block;
		overflow: hidden;
		width: 700rpx;
		height: 1040rpx;
		border-radius: 8rpx;
	}

	.save-btn-g {
		width: 300rpx;
		height: 80rpx;
		border-radius: 8rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 30rpx;
		border-radius: 8rpx;
		text-align: center;
		background: #f34930;
		margin-top: 80rpx
	}
</style>

<style>
	canvas {
		position: absolute;
		top: -999999rpx;
		left: 0;
		/* top: -180rpx;
		left: 0; */
	}

	/* #ifdef H5 */
	.tags .uni-tag {
		margin-right: 10rpx;
	}

	/* #endif */

	.shop-info-desc {
		font-size: 28rpx;
		line-height: 42rpx;
		letter-spacing: 1rpx;
		color: #333333;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	image {
		will-change: transform
	}

	.tui-mtop {
		margin-top: 0 !important
	}
</style>
